import 'package:flutter/material.dart';
import 'package:hi_flutter/app_page.dart';

class AnimatedListDemoPage extends StatefulWidget {
  const AnimatedListDemoPage({super.key});

  @override
  State<AnimatedListDemoPage> createState() => _AnimatedListDemoPageState();
}

/// 获取StatefulWidget的state对象的两周方法
///  1. 通过Context获取 context.findAncestorStateOfType 获取 StatefulWidget 的状态的方法是通用的
///  如果 StatefulWidget 的状态是希望暴露出的，应当在 StatefulWidget 中提供一个of 静态方法来获取其 State 对象，
///  开发者便可直接通过该方法来获取；如果 State不希望暴露，则不提供of方法。这个约定在 Flutter SDK 里随处可见
///  2. GlobalKey 是 Flutter 提供的一种在整个App 中引用 element 的机制。
///  如果一个 widget 设置了GlobalKey，那么我们便可以通过globalKey.currentWidget获得该 widget 对象、
///  globalKey.currentElement来获得 widget 对应的element对象，
///  如果当前 widget 是StatefulWidget，则可以通过globalKey.currentState来获得该 widget 对应的state对象
///
class _AnimatedListDemoPageState extends State<AnimatedListDemoPage> {
  var data = <String>[];
  int counter = 5;

  static GlobalKey<AnimatedListState> globalKey = GlobalKey();

  @override
  void initState() {
    for (var i = 0; i < counter; i++) {
      data.add("${i + 1}");
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AppPage(
      body: Stack(
        children: [
          AnimatedList(
              key: globalKey,
              initialItemCount: data.length,
              itemBuilder: (BuildContext context, int index,
                  Animation<double> animation) {
                return FadeTransition(
                  opacity: animation,
                  child: buildItem(context, index),
                );
              }),
          buildAddBtn(),
        ],
      ),
    );
  }

  // 创建一个 “+” 按钮，点击后会向列表中插入一项
  Widget buildAddBtn() {
    return Positioned(
      bottom: 30,
      left: 0,
      right: 0,
      child: FloatingActionButton(
        onPressed: () {
          // 添加一个列表项
          data.add('${++counter}');
          // 告诉列表项有新添加的列表项
          globalKey.currentState!.insertItem(data.length - 1);
          // AnimatedList.of(context).insertItem(data.length - 1);
          print('添加 $counter');
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  // 构建列表项
  Widget buildItem(context, index) {
    String char = data[index];
    return ListTile(
      //数字不会重复，所以作为Key
      key: ValueKey(char),
      title: Text(char),
      trailing: IconButton(
        // 点击时删除
        onPressed: () {
          data.remove(index);
          AnimatedList.of(context).removeItem(index, (context, animation) {
            return FadeTransition(
              opacity: animation,
              child: buildItem(context, index),
            );
          }, duration: const Duration(milliseconds: 100));
        },
        icon: const Icon(Icons.delete),
      ),
    );
  }
}
